<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>绑定信息</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileColor" content="#0e90d2">


    <link rel="stylesheet" href="assets/css/public.css">
    <link rel="stylesheet" type="text/css" href="layer/skin/default/layer.css">
    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <style type="text/css">
        .center{
        margin-top:51px;
        }
        .info {
            width: 90%;
            margin-left: 5%;
            height: 43px;
            margin-top: 25px;
            box-shadow: 1px 1px 10px rgba(253, 135, 67, 0.22);
            -webkit-box-shadow: 1px 1px 10px rgba(253, 135, 67, 0.22);
            -moz-box-shadow: 1px 1px 10px rgba(253, 135, 67, 0.22);
        }

        .info .tit span {
            line-height: 43px;
            color: #FD8340;
            font-size: 16px;

        }

        .info div input {
            width: 100%;
            height: 43px;
            color: #CCCCCC;
            font-size: 14px;
            border: none;
        }

        .info div button {
            background: none;
            border: none;
            padding: 0;
            /*line-height:43px;*/
            height: 24px;
            margin-top: 10px;
            background: #2AA781;
            color: #fff;
            font-size: 11px;
            border-radius: 12px;
            width: 100%;
            outline: none;
        }

        .btn {
            margin-top: 87px;
        }

        .btn > span {
            width: 48%;
            display: block;
            margin-left: 26%;
            height: 45px;
            background: linear-gradient(to bottom, #FD8340, #FD9F52);
            border-radius: 15px;
            color: #fff;
            font-size: 15px;
            line-height: 45px;
            text-align: center;
        }

    </style>

</head>
<body>
<div class="top am-g">
    <div class=" am-u-sm-12  am-text-center">
        <a href="index.html">
            <img src="assets/i/zuo.png" width="8"></a>
        <span class="center-title">信息绑定</span>
    </div>
</div>
<div class="am-g center">
    <div class="am-u-sm-12 info ">
        <div class="am-u-sm-3 am-padding-0 tit">
            <span>姓名：</span>
        </div>
        <div class="am-u-sm-9 am-padding-0">
            <input type="text" placeholder="请输入姓名" style="color: #666" id="name">
        </div>
    </div>
    <div style="clear:both;"></div>
    <div class="am-u-sm-12 info ">
        <div class="am-u-sm-4 am-padding-0 tit">
            <span>身份证号：</span>
        </div>
        <div class="am-u-sm-8 am-padding-0">
            <input type="text" placeholder="请输入身份证号" style="color: #666" id="shenfenzheng">
            <div class="reg"></div>
        </div>
    </div>
    <div style="clear: both"></div>
    <div class="am-u-sm-12 info ">
        <div class="am-u-sm-3 am-padding-0 tit">
            <span>手机号：</span>
        </div>
        <div class="am-u-sm-5 am-padding-0">
            <input type="text" placeholder="请输入手机号" id="telphone" style="color: #666">
            <div class="reg"></div>
        </div>
        <div class="am-u-sm-4 am-padding-0">
            <button onclick="getPhoneCode()" id="code">发送验证码</button>
        </div>
    </div>
    <div style="clear:both;"></div>
    <div class="am-u-sm-12 info ">
        <div class="am-u-sm-3 am-padding-0 tit">
            <span>验证码：</span>
        </div>
        <div class="am-u-sm-9 am-padding-0">
            <input type="text" placeholder="请输入验证码" style="color: #666" id="yanzhengma">
        </div>
    </div>
    <div class="am-u-sm-12 btn">

        <span onclick="apply()" class="bangding">立即绑定</span>

    </div>
</div>
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
    <div class="am-modal-dialog" style="border-radius: 10px;">
        <div class="am-modal-hd">
            <a href="javascript: void(0)" class="" style="background: url('assets/i/down.png')no-repeat;height: 30px;width: 30px;display: block;
background-size: 15px;float: right" data-am-modal-close></a>
        </div>
        <div class="am-modal-bd" style="margin-top: 44px;font-size: 16px;color: #333;font-weight: bold">
            联系物业进行信息录入
        </div>
    </div>
</div>
</body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/angular.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/global.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script>


    var countdown = 60;
    initGlobalPage();
    var token = sessionStorage.access_token;  //token
    function getCode(obj) {
        if (countdown == 0) {
            $(obj).attr("disabled", false);
            $(obj).css("background", "#2AA781");
            $(obj).css("color", "#fff");
            $(obj).html("获取验证码");
            countdown = 60;
            return;
        } else {
            $(obj).attr("disabled", true);
            $(obj).css("background", "#CCCCCC")
            $(obj).html("(" + countdown + ")后再次发送");
            countdown--;
        }
        setTimeout(function () {
            getCode(obj)
        }, 1000)
    }
    ;
    function getPhoneCode() {
        var name = $('#name').val();
        if (name == '') {
            layer.msg('请输入您的名字');
            return;
        }

        var shenfenzheng = $("#shenfenzheng").val();
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

        if (reg.test(shenfenzheng)) {

        } else {
            layer.msg("您输入的身份证号不正确或者为空")
            return;
        }
        var telphone = $("#telphone").val();
        var reg1 = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
        if (reg1.test(telphone)) {

        } else {
            layer.msg("您输入的电话号码不正确或者为空");
            return;
        }

        var obj = $('#code');
        getCode(obj);

        var data = {
            token: token,
            phone: telphone,
        }
        //获取手机验证码
        $.get("/index/user/ajax_get_code", data, function (result) {
            console.log(result);

            if (result.code == -1) {
                initGlobalPage();
                layer.msg(result.msg);
                return;
            }
            if (result.code==0){
                againToken();
                return;
            }
            if (result.code==3){
                layer.msg(result.msg);
                return;
            }


        })
    }


    function apply() {
        var name = $('#name').val();
        if (name == '') {
            layer.msg('请输入您的名字');
            return;

        }
        var shenfenzheng = $("#shenfenzheng").val();
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test(shenfenzheng)) {
        } else {
            layer.msg("您输入的身份证号不正确或者为空")
            return;
        }
        var telphone = $("#telphone").val();
        var reg1 = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
        if (reg1.test(telphone)) {

        } else {
            layer.msg("您输入的电话号码不正确或者为空");
            return;
        }
        var yanzhengma= $("#yanzhengma").val();
        var data = {
            token: token,
            user_name:name,
            id_card:shenfenzheng,
            phone:telphone,
            code:yanzhengma,

        }
        $.post("/index/user/ajax_bind_user_info",data, function (result) {
            console.log(result);


            if (result.code == -1) {
                initGlobalPage();
                layer.msg(result.msg);
                return;
            }
            if (result.code == 3){
                $(".bangding").attr("data-am-modal","{target: '#doc-modal-1', closeViaDimmer: 0,width: 300, height: 200,}");
                return;
            }
            if (result.code ==0){
                againToken();
                return;
            }
            if (result.code==1){
                self.location="index.html"
                return;
            }

        })
    }

</script>
</html>